<template>
  <div>
    <div class="relative px-32 order-msg mainBackground" :class="{ 'hide': !isShow && detail.sellName }">
      <order-data class="w-full" :detail="detail">
        <slot name="divider"></slot>
      </order-data>
      <van-icon v-if="detail.sellName" @click="show" name="arrow-down" class="absolute bottom-10 font-700 text-grey"
        :class="{ 'rotateZ': isShow }" />
    </div>
    <div class="h-16 diviLine"></div>
    <div class="px-32 pt-35 mainBackground">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div>
              <p class="font-30 c2cColor">
                <slot name="trade-title"></slot>
              </p>
              <van-divider />
              <div class="flex items-center mb-28">
                <div class="w-6 h-32 rounded-xl mr-20" style="background: #E7BB41;"></div>
                <span class="ml-8 font-30 c2cColor">{{ $t(detail.methodName) }}</span>
              </div>
            </div>
          </template>
          <van-cell-group class="payment-method">
            <van-cell v-for="(item, index) in detail.tradeMethod" :key="index" :title="item.label" :value="item.value" />
          </van-cell-group>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="h-16 diviLine"></div>
    <div class="p-32 mainBackground">
      <slot name="terms"></slot>
    </div>
  </div>
</template>

<script>
import { Icon, Collapse, CollapseItem, Cell, CellGroup, Divider } from "vant"
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
export default {
  name: "TradeData",
  // props: ['title', 'count', 'totalPrice', 'createOrderTime', 'orderNumber', 'sellName', 'clientType','tradeMethod','methodName','unitPrice'],
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isShow: false,
      activeNames: [],
    }
  },
  methods: {
    show() {
      this.isShow = !this.isShow;
    }
  },
  components: {
    [Icon.name]: Icon,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Divider.name]: Divider,
    OrderData,
  }
}
</script>

<style lang="scss" scoped>
.mainBackground {
  ::v-deep {

    .van-cell-group,
    .van-cell {
      @include themify() {
        color: themed("text_color1");
      }

      @include themify() {
        background: themed("main_background");
      }
    }

    .van-cell__value {
      @include themify() {
        color: themed("text_color");
      }
    }

    .order-msg {
      transition: all .5s ease;
      overflow: hidden;

      .van-icon {
        left: 50%;
        transform: translateX(-50%);
        transition: all .5s ease;
      }
    }

    .payment-method {
      .van-cell {
        margin-bottom: 50px;
        font-size: 28px;

        &:last-child {
          margin-bottom: 30px;
        }

        .van-cell__title {
          color: #8A919E;
        }
      }
    }



    .rotateZ {
      transform: translateX(-50%) rotateZ(180deg) !important;
    }

    .hide {
      height: 365px;
    }

    .van-collapse-item__content {
      padding: 0;
      font-size: 28px;

      @include themify() {
        color: themed("c2c_color");
      }

      @include themify() {
        background: themed("main_background");
      }
    }

    .van-collapse-item {
      .van-cell__title {
        font-size: 28px;

        @include themify() {
          color: themed("c2c_color");
        }
      }

      .van-divider {
        margin: 28px 0;
        border-color: transparent !important;
      }
    }
  }
}
</style>